<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d />
<#import '${ctx}/sys/include/body.html' as c />
<#import '${ctx}/sys/include/table/select.html' as select />
<#macro detail> <!DOCTYPE html>
<html>
<head>
<@d.head title="def" />
<link rel="stylesheet" href="${ctx}/resource/css/chart/chart_def.css">
<script src="${ctx}/resource/antv/g2.v4.0.8.js"></script>
<script src="${ctx}/resource/antv/dataset.js"></script>
<style type="text/css">
.bg-white {
	background-color: #ffffff;
}

.query-item {
	max-width: 150px;
	white-space: nowrap; /* 规定文本是否折行 */
	overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
	text-overflow: ellipsis;
	display: inline-block;
	padding-right: 10px;
}

.search-item-dt {
	display: inline;
}

.search-item-dd {
	word-break: break-word;
	display: inline;
}

.search-item-dl {
	display: inline-block;
	max-height: 115px !important;
	line-height: 2em;
	word-break: break-word;
	/* overflow: hidden; */
	margin-bottom: 0;
	border-bottom-color: rgb(52, 55, 65);
}

.layui-layer-tips .layui-layer-content {
	color: #333 !important;
	background-color: #ece3e3 !important;
}

.layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT
	{
	border-right-color: #ece3e3 !important;
}

.query-btn {
	padding: 0 10px;
	font-size: 12px;
}

.close-query {
	margin-left: -4px !important;
	position: absolute;
	color: #555;
	cursor: pointer;
	background-color: transparent;
}

.layui-layer-tips .layui-layer-content {
	box-shadow: 7px 7px 3px rgba(0, 0, 0, .2) !important;
}
</style>
</head>
<body>
	<div class="layui-tab layui-tab-brief" lay-filter="graph_config">
		<ul class="layui-tab-title">
			<li class="layui-col-md1">图表展示</li>
			<li class="layui-col-md1 layui-this">图表设置</li>
			<div>
				<div class="layui-col-md2 layui-col-md-offset7">
					<button id="table_name" style="margin-left: 11px"
						class="layui-btn-primary layui-btn-sm">
						图表名称：${chartName!'未命名图表'}</button>
				</div>
			</div>
			<div class="layui-col-md1">
				<button id="save_table" style="margin-left: 30%;"
					class="layui-btn layui-btn-sm">保存图表</button>
			</div>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item">
				<div class="layui-form-item" name="search_frame">
					<label class="layui-form-label">查询条件</label>
					<div class="layui-input-block" id="query_area">
						<div class="layui-btn" id="add_query">添加条件</div>
					</div>
				</div>
				<div class="container" name="search_frame" style="margin-top: 15px;">
					<div class="layui-collapse"></div>
				</div>
				<div id="pic" class="text-center"></div>
			</div>
			<div class="layui-tab-item layui-show">
				<div class="layui-container" style="margin-top: 12px;">
					<div class="layui-row">
						<#nested>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
layui.extend({
	xmSelect: 'xm-select'
}).use(['element','form','jquery','appJs','layer','xmSelect'],function(){
	var element = layui.element;
	var $ = layui.$;
	var app = layui.appJs;
	var layer = layui.layer;
	var form = layui.form;
	var xmSelect = layui.xmSelect;
	let query_div = '<div id="field_select" class="xm-select-demo" style="width:380px;margin-bottom:3px;"></div>'+
	'<div class="layui-form">'+
		'<div class="layui-inline" style="width:90px;">'+
			'<select>'+
			'<option value="=">等于</option>'+
			'<option value=":">包含</option>'+
			'<option value=">">大于</option>'+
			'<option value="<">小于</option>'+
			'</select>'+
		'</div>'+
		'<div class="layui-input-inline" style="width:280px;margin-left: 12px;margin-right: 5px;position: initial;">'+
			'<input name="query_value" type="text" class="layui-input"></input>'+
		'</div>'+
		'<div class="layui-btn-group layui-input-inline"><a class="layui-btn layui-btn-primary query-btn" id="query_confirm"><i class="layui-icon">&#xe654;</i></a></div>'+
	'</div>';
	$("#add_query").unbind('click');
	$("#add_query").bind('click',function(){
		var layerIndex = layer.open({
			type:4,
			content:[query_div,'#add_query'],
			shade: 0,
			tips:3,
			skin: 'demo-class',
			area:['480px','100px']
		});
		var field_select = xmSelect.render({
			el: '#field_select',
			radio: true,
			clickClose: true,
			filterable: true,
			remoteSearch: true,
			remoteMethod: function(val, cb, show){
				//这里引入了一个第三方插件axios, 相当于$.ajax
				$.get('${ctx}/biz/data/ds/fields',{id: $("input[name='dsId']").val(),key:val},function(data){
				try{
					var res = data.values;
					cb(res.data)
				}catch(err){
					cb([]);
				}
				});
				},
			model: {
				label: {
					type: 'text',
					text: {
						left: '',
						right: '',
						separator: ', ',
					}
				}
			},
			data: []
		});
		$("#query_confirm").unbind('click');
		$("#query_confirm").bind('click',function(){
			let field_name = field_select.getValue("name");
			let op = $(this).parent().parent().find("div>select>option:selected").val();
			let value = $(this).parent().parent().find("input[name='query_value']").val();
			addQuery(field_name,op,value);
			queryItemAction();
			layer.msg(field_name+op+value);
			layer.close(layerIndex);
			//do search
			drawPic(buildQueryParam);
		});
		form.render('select');
	});

	function addQuery(field,op,value) {
		let q = $('<div class="layui-btn layui-btn-radius layui-btn-primary" style="cursor: auto;"></div>');
		let hidden = $("<div name='query_cmd' stype='display:hidden'></div>");
		hidden.attr("field",field);
		hidden.attr("op",op);
		hidden.attr("value",value);
		q.append($("<div class='query-item'></div>").html(field+op+value));
		q.append($('<span class="layui-badge-dot close-query">X</span>'));
		q.append(hidden);
		$("#query_area").prepend(q);
		$("#query_area");
	}

	function buildQueryParam() {
		let param = {};
		param.datasource = $("#dsId").val();
		let item = $("div[name='query_cmd']");
		for(let i of item) {
			let f = $(i).attr("field");
			let o = $(i).attr("op");
			let v = $(i).attr("value");
			let pack = {field:f,op:o,value:v};
			if(!param.must) {
				param.must = [];
			}
			param.must.push(pack);
		}
		return param;
	}

	function queryItemAction() {
		$(".close-query").unbind('click');
		$(".close-query").bind('click',function(){
			$(this).parent().remove();
		});
		$(".query-item").unbind('mouseenter').unbind('mouseleave');
		$(".query-item").bind('mouseenter',function(){
			let l = layer.tips($(this).html(),this,{tips:3});
			$(this).data('index',l);
		}).bind('mouseleave',function(){
			layer.close($(this).data('index'));
		});
	}
});

</script>
</html>

</#macro>